<script setup lang="ts">
import { validaEmpty } from '@/utils/validate';
import { getQpXY, zimubiao } from '@/utils/wuqizi';
interface Props {
  qipu: number[][];
  qsList: any;
  activeQp: any;
}
const props = defineProps<Props>();
const qp = ref<number[][]>([]);
qp.value = props.qipu;
const { activeQp, qipu } = toRefs(props);
const emits = defineEmits(['sendmsg']);
const handleClickXq = (msg) => {
  emits('sendmsg', {
    msg,
    type: 'play',
  });
};

const x1 = ref();
const y1 = ref();
const active = ref();
watch(activeQp, (newVal) => {
  console.log(newVal);
  if (newVal) {
    let { x, y, player, msg } = newVal;
    if (msg) {
      const msgD = getQpXY(msg);
      if (validaEmpty(msgD.x)) {
        x = msgD.x;
        y = msgD.y;
      }
    }
    console.log(x, y);
    active.value = {
      x,
      y,
    };
    qp.value[x][y] = player;
    console.log(qp.value);
  } else {
    active.value = undefined;
  }
});
watch(qipu, (newVal) => {
  console.log(newVal);
  if (newVal) {
    qp.value = newVal;
    active.value = undefined;
  }
});
</script>

<template>
  <div>
    <div class="qs-table">
      <div v-for="(item, index) in qsList" class="qs-table-item">
        {{ item.label }}:
        <span v-if="item.user">{{ item.userName }}</span>
      </div>
    </div>
    <Qp :active="active" :qipu="qp" @change="handleClickXq" />
  </div>
</template>

<style lang="scss" scoped>
.qs-table {
  color: #ccc;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;

  &-item {
    &:nth-child(2) {
      margin-left: 10px;
    }
  }
}
</style>
